<template>
  <div>
    <el-divider>{{ $t("formgen.examConfig.option") }}</el-divider>
    <div class="mt10">
      <draggable
        :animation="340"
        v-model="activeData.options"
        group="selectItem"
        handle=".option-drag"
        item-key="value"
      >
        <template #item="{ element, index }">
          <div class="select-item">
            <div class="select-line-icon option-drag">
              <el-icon>
                <ele-Operation />
              </el-icon>
            </div>
            <el-input
              v-model="element.label"
              :placeholder="$t('formgen.option.optionName')"
              size="small"
            ></el-input>
            <div
              class="close-btn select-line-icon"
              @click="activeData.config.options.splice(index, 1)"
            >
              <el-icon>
                <ele-Remove />
              </el-icon>
            </div>
          </div>
        </template>
      </draggable>
      <div class="ml20 mb10">
        <el-button
          icon="ele-CirclePlus"
          link
          type="primary"
          @click="addSelectItem"
        >
          {{ $t("formgen.option.addOption") }}
        </el-button>
      </div>
    </div>
    <div class="mt10">
      <el-divider>{{ $t("formgen.checkitem.btn") }}</el-divider>
      <draggable
        :animation="340"
        v-model="activeData.btnList"
        group="selectItem"
        handle=".option-drag"
        item-key="value"
      >
        <template #item="{ element, index }">
          <div class="select-item">
            <div class="select-line-icon option-drag">
              <el-icon>
                <ele-Operation />
              </el-icon>
            </div>
            <el-input
              v-model="element.label"
              :placeholder="$t('formgen.option.optionName')"
              size="small"
            ></el-input>
            <div
              class="close-btn select-line-icon"
              @click="activeData.config.options.splice(index, 1)"
            >
              <el-icon>
                <ele-Remove />
              </el-icon>
            </div>
          </div>
        </template>
      </draggable>
      <div class="ml20 mb10">
        <el-button
          icon="ele-CirclePlus"
          link
          type="primary"
          @click="addBtnItem"
        >
          {{ $t("formgen.option.addOption") }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="CheckItem">
import { defineProps, onMounted } from "vue";
import draggable from "vuedraggable";
import { generateId } from "@/utils";

const props = defineProps({
  activeData: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

onMounted(async () => {});

const addSelectItem = () => {
  props.activeData.options.push({
    label: "",
    value: generateId()
  });
};

const addBtnItem = () => {
  props.activeData.btnList.push({
    label: "",
    value: generateId()
  });
};
</script>

<style lang="scss" scoped>
@use "../../../assets/styles/config/options" as *;
</style>
